import React, { Component } from 'react'
import { Table, Button ,Space,Drawer,Form, Input, Checkbox } from 'antd';
import * as action from "../api/index"
import {connect} from "react-redux"
import {bindActionCreators} from "redux"
export class TablePar extends Component {
    state = {
        selectedRowKeys: [], // Check here to configure the default column
        loading: false,
        visible: false,
        record:{},
        data:[

        ],
        columns :[
          {
            title: 'Name',
            dataIndex: 'name',
          },
          {
            title: 'Age',
            dataIndex: 'age',
        
          },
          {
            title: 'Address',
            dataIndex: 'address',
          },
          {
            title: 'action',
            dataIndex: 'action',
            render: (text, record) => (
              <Space size="middle">
                <Button type="dashed" onClick={this.showDrawer.bind(this,record)}>编辑</Button>
                <Button type="primary"  onClick={this.delItem.bind(this,record)}> Delete</Button>
              </Space>
            ),
          }
        ]
      };
      componentDidMount(){

      }
      showDrawer(record) {
        this.setState({
          visible: true,
          record:record
        });
      };
    
      onClose = () => {
        this.setState({
          visible: false,
        });
      };
    
      delItem(record){

        this.props.delItem(record)
        // this.forceUpdate()//强制刷新页面
      }
      start = () => {
        this.setState({ loading: true });
        // ajax request after empty completing
        setTimeout(() => {
          this.setState({
            selectedRowKeys: [],
            loading: false,
          });
        }, 1000);
      };
    
      onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
      };
       onFinish  (values)  {
        console.log('Success:', values);
        let obj ={
          item:this.state.record,
          values
        }
        this.props.editItem(obj)
      };
    
       onFinishFailed (errorInfo)  {
        console.log('Failed:', errorInfo);
      };
      render() {
        console.log("xxx",this.props);
        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
          selectedRowKeys,
          onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
          <div>
            <div style={{ marginBottom: 16 }}>
              <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
                Reload
              </Button>
              <span style={{ marginLeft: 8 }}>
                {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
              </span>
            </div>
            <Drawer
              title="Basic Drawer"
              placement="right"
              closable={false}
              onClose={this.onClose}
              visible={this.state.visible}
              getContainer={false}
              style={{ position: 'absolute' }}
            >
              <Form
                name="basic"
                labelCol={{
                  span: 8,
                }}
                wrapperCol={{
                  span: 16,
                }}
                initialValues={{
                  remember: true,
                }}
                onFinish={this.onFinish.bind(this)}
                onFinishFailed={this.onFinishFailed.bind(this)}
                autoComplete="off"
              >
                <Form.Item
                  label="name"
                  name="name"
                 
                >
                  <Input />
                </Form.Item>

                <Form.Item
                  label="age"
                  name="age"
                >
                  <Input />
                </Form.Item>

                <Form.Item
                  label="address"
                  name="address"
                 
                >
                  <Input />
                </Form.Item>

                <Form.Item
                  wrapperCol={{
                    offset: 8,
                    span: 16,
                  }}
                >
                  <Button type="primary" htmlType="submit">
                    Submit
                  </Button>
                </Form.Item>
              </Form>
            </Drawer>
            <Table rowSelection={rowSelection} columns={this.state.columns} dataSource={this.props.list} />
          </div>
        );
      }
}

const mapState = (state) =>{
  return {
    ...state.reducerName
  }
}
const mapDispatch = (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapState,mapDispatch)(TablePar)
